import { t } from 'i18next'
import { useEffect, useState } from 'react'
import { Wrap } from './style'
import { StyledBottom, ErrorTips, IconNotFound } from '../../style'
import { Button } from '@kedacom/react-next'
import { Caller } from './caller'
import { Callee } from './callee'
import { API_MEETING_PREFIX } from '@/utils/constant'
import { useRequest } from 'ahooks'
import { IMeetingInfo, fetchGetRollCall, FetchRollCall } from '@/api/meetingSpace'
import { transRollCallInfo } from './translator'
/** 点名轮询签到表 */
const RollCall = ({ meetingInfo }: { meetingInfo: IMeetingInfo }) => {
	const [rollCall, setRollCall] = useState<FetchRollCall>({ roll_callers: [], roll_callees: [] })
	const [tabActive, setTabActive] = useState<1 | 2>(1)
	const { data, loading } = useRequest(() => fetchGetRollCall(meetingInfo.meetingMoid))
	useEffect(() => {
		if (!loading && data) {
			if (data.success) {
				if (data.data) {
					setRollCall(data.data)
				}
			}
		}
	}, [data, loading])
	const handleChangeTab = (tab: 1 | 2) => () => {
		setTabActive(tab)
	}
	const handleExport = () => {
		window.open(`${API_MEETING_PREFIX}/mcc/${meetingInfo.meetingMoid}/roll_call/sign/export`)
	}
	return (
		<Wrap>
			{rollCall.roll_callers.length === 0 && rollCall.roll_callees.length === 0 ? (
				<ErrorTips>
					<IconNotFound />
					{t('会议中未开启点名轮询')}。
				</ErrorTips>
			) : (
				<>
					<div className="special-tab">
						<div
							className={`${tabActive === 1 ? 'tab-item tab-active' : 'tab-item'}`}
							onClick={handleChangeTab(1)}
						>
							{t('点名人')}（{rollCall.roll_callers.length}）
						</div>
						<div
							className={`${tabActive === 2 ? 'tab-item tab-active' : 'tab-item'}`}
							onClick={handleChangeTab(2)}
						>
							{t('被点名人')}（{rollCall.roll_callees.length}）
						</div>
						<Button className="btn-export" onClick={handleExport}>
							{t('导出')}
						</Button>
					</div>
					{tabActive === 1 && <Caller rollcallPersons={transRollCallInfo(rollCall.roll_callers)} />}
					{tabActive === 2 && <Callee namedPersons={transRollCallInfo(rollCall.roll_callees)} />}
				</>
			)}
			<StyledBottom />
		</Wrap>
	)
}
export default RollCall
